<template>
  <div>
    <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps">
      <span slot="createTime" slot-scope="text">{{ text }}</span>
      <span slot="status" slot-scope="text">{{ filterStatus(text, orderStatus) }}</span>
      <span slot="type" slot-scope="text">{{ text | orderType }}</span>
      <span slot="action" slot-scope="text, record">
        <router-link :to="blankQuery == 'blank' ? `/box/serviceOrder/detail/${record.id}?blank=blank` : `/box/serviceOrder/detail/${record.id}`">详情</router-link>
        <!-- <a style="color: rgba(0,0,0,.25);cursor: default;">详情</a> -->
        <a-divider type="vertical" />
        <a @click="handelComment(record)">查看评价</a>
      </span>
    </s-table>
    <a-modal v-model="visible" title="查看评价" class="comment-modal">
      <div class="section" style="margin-top:0;">
        <h3>评分</h3>
        <span>2021-03-07 17:23:23</span>
      </div>
      <a-divider style="margin-top:0;" />
      <a-row>
        <a-col :span="5">BOX</a-col>
        <a-rate :default-value="2" disabled allow-half />
        <span class="text">超赞</span>
      </a-row>
      <a-row>
        <a-col :span="5">搭配师</a-col>
        <a-rate :default-value="2" disabled allow-half />
        <span class="text">超赞</span>
      </a-row>
      <a-row>
        <a-col :span="5">尺码匹配度</a-col>
        <a-rate :default-value="2" disabled allow-half />
        <span class="text">超赞</span>
      </a-row>
      <a-row>
        <a-col :span="5">客服评价</a-col>
        <a-rate :default-value="2" disabled allow-half />
        <span class="text">超赞</span>
      </a-row>
      <a-row>
        <a-col :span="4">评价内容</a-col>
        <a-textarea placeholder="Basic usage" v-model="comment" readonly />
      </a-row>
      <div class="section">
        <h3>问卷</h3>
        <span>2021-03-07 17:23:23</span>
      </div>
      <a-divider style="margin-top:0;" />
      <ul class="comment-list">
        <li>
          <img src="11111" alt="" />
          <div>
            <p>款号：111111</p>
            <p><b>问题问题：</b>222222</p>
          </div>
        </li>
        <li>
          <img src="11111" alt="" />
          <div>
            <p>款号：111111</p>
            <p><b>问题问题：</b>222222</p>
          </div>
        </li>
      </ul>
    </a-modal>
    <ReviewModal ref="reviewModal"></ReviewModal>
  </div>
</template>
<script>
import { boxList } from '@api/box/api'
import { STable } from '../../../components'
import ReviewModal from '@/views/box/components/review/reviewModal'
import '@/views/box/util/filter'
import { getQueryString } from '@/assets/js/common'
import { getOrderStatus } from '@/views/box/util/global'
const columns = [
  {
    title: '服务单编号',
    dataIndex: 'boxSn'
  },
  {
    title: '状态',
    dataIndex: 'status',
    align: 'center',
    width: 100,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '类型',
    dataIndex: 'type',
    scopedSlots: { customRender: 'type' },
    align: 'center',
    width: 80
  },
  {
    title: '搭配师',
    dataIndex: 'fashionerName',
    align: 'center',
    width: 80
  },
  {
    title: '主动要盒',
    dataIndex: 'isAsk',
    align: 'center'
  },
  {
    title: '总价',
    dataIndex: 'totPrice',
    align: 'center'
  },
  {
    title: '商品数',
    dataIndex: 'totProduct',
    align: 'center'
  },
  {
    title: '购买数',
    dataIndex: 'buyProduct',
    align: 'center'
  },
  {
    title: '退货数',
    dataIndex: 'returnProduct',
    align: 'center'
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    align: 'center',
    scopedSlots: { customRender: 'createTime' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    STable,
    ReviewModal
  },
  data() {
    this.columns = columns
    return {
      unionId: '',
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
        // showQuickJumper: true
      },
      visible: false,
      comment: '111111111111111',
      loadData: parameter => {
        let params = {
          page: parameter,
          requestData: {
            unionId: this.unionId
          }
        }
        return boxList(params).then(res => {
          if (res.code == 0) {
            return res
          } else {
            this.$message.error(res.msg)
            const data = {
              page: {
                pageNo: 0,
                count: 0,
                pageSize: 10
              },
              data: []
            }
            return data
          }
        })
      },
      orderStatus: [],
      blankQuery: ''
    }
  },
  computed: {
    filterStatus(v, statusList) {
      return (v, statusList) => {
        if (statusList.length > 0) {
          let result = statusList.filter(e => e.stateValue == v)
          if (result.length > 0) {
            return result[0].stateName
          } else {
            return v
          }
        } else {
          return v
        }
      }
    }
  },
  created() {
    this.unionId = this.$route.params.id
    this.blankQuery = getQueryString('blank')
    this.fetchStatus()
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  },
  methods: {
    handelComment(record) {
      this.$refs.reviewModal.show(record.id)
    },
    // 获取服务单状态
    async fetchStatus() {
      this.orderStatus = await getOrderStatus()
    }
  }
}
</script>
<style lang="less" scoped>
.comment-modal {
  .ant-modal-body {
    .section {
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      align-items: center;
      line-height: 30px;
    }
    .ant-row {
      display: flex;
      line-height: 30px;
      margin-bottom: 12px;
      .text {
        margin-left: 12px;
      }
    }
    .comment-list {
      padding: 0 12px;
      li {
        margin-bottom: 12px;
        display: flex;
        border-bottom: 1px dashed #cdcdcd;
        img {
          min-width: 60px;
          height: 60px;
          object-fit: scale-down;
          border: 1px dashed #cdcdcd;
          margin-right: 24px;
        }
      }
      li:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>
